import React, { Component } from 'react';
import '../styles/MyProList.css'
import { index_prolist } from '../api';
import { withRouter } from 'react-router-dom';

class MyProList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            prolist: []
        }
    }
    componentDidMount() {
        index_prolist({page:2,count:27}).then((res) => {
            console.log(res.data);
            this.setState({
                prolist: res.data.list
            })
        })
    }
    toDetail(id) {
        this.props.history.push(`/detail/`+id)
    }

    render() {
        return (
            <div className='proList'>
                {
                    this.state.prolist.length != 0 ?
                        this.state.prolist.map((item, index) => {
                            return (
                                <div className="proList-box" key={index} onClick={()=>{this.toDetail(item.id)}}>
                                    <div className="proImg">
                                        <img src={item.pic} alt="" />
                                    </div>
                                    <div className='proname'>{item.name}</div>
                                    <div className="original-price">原价￥：{item.salesPrice.value}</div>
                                    <div className="current-price">抢购价￥：<span>{item.salesPrice.value}</span></div>
                                </div>
                            )
                        }) : <div className='empty'>网络异常,请尝试刷新页面</div>
                }
            </div>
        );
    }
}

export default withRouter(MyProList);